var tree, mapPanel,infoControls;

Ext
		.onReady(function() {
			OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";
			var bounds = new OpenLayers.Bounds(80.060150146796,
					26.34874029520519, 88.2042617796755, 30.44852477101598);
			var root = new Ext.tree.AsyncTreeNode(
					{
						text : 'GeoServer WMS',
						loader : new GeoExt.tree.WMSCapabilitiesLoader(
								{
									url : 'http://localhost:7070/InformationSystem/home/getCapabilities',
									layerOptions : {
										buffer : 0,
										singleTile : true,
										ratio : 1
									},
									layerParams : {
										'TRANSPARENT' : 'TRUE',
										'VISIBILITY' : 'TRUE'
									},
									// customize the createNode method to add a
									// checkbox to nodes
									createNode : function(attr) {
										attr.checked = attr.leaf ? false
												: undefined;
										return GeoExt.tree.WMSCapabilitiesLoader.prototype.createNode
												.apply(this, [ attr ]);
									}
								})
					});

			tree = new Ext.tree.TreePanel({
				root : root,
				region : 'north',
				title : 'Layers',
				split : true,
				height : 360,
				minSize : 150,
				autoScroll : true,
				nodeType : "gx_layer",
				listeners : {
					// Add layers to the map when ckecked, remove when
					// unchecked.
					// Note that this does not take care of maintaining the
					// layer
					// order on the map.
					'checkchange' : function(node, checked) {
						if (checked === true) {
							
							mapPanel.map.addLayer(node.attributes.layer);
						} else {
							mapPanel.map.removeLayer(node.attributes.layer);
						}
					}
				}
			});

			mapPanel = new GeoExt.MapPanel({
				id : 'content-panel',
				region : 'center',
				zoom : 2,
				center: new OpenLayers.LonLat(85.0,29.0),
				map : {
					mapExtent : bounds,
					maxResolution : 0.023609375,
					projection : "EPSG:4326",
					units : 'degrees'
				},
				layers : [

				]
			});
			

			var detailsPanel = {
				title : 'Details',
				region : 'center',
				bodyStyle : 'padding-bottom:15px;background:#eee;',
				autoScroll : true,
				html : '<p class="details-info">When you select a layout from the tree, additional details will display here.</p>'
			};

			new Ext.Viewport({
				layout : 'border',
				title : 'Information System',
				items : [ {
					xtype : 'box',
					id : 'header',
					region : 'north',
					html : '<h1> Map Browser</h1>',
					height : 30
				}, {
					layout : 'border',
					id : 'layout-browser',
					region : 'west',
					border : false,
					split : true,
					margins : '2 0 5 5',
					width : 275,
					minSize : 100,
					maxSize : 500,
					items : [ tree, detailsPanel ],
					collapsible : true
				}, mapPanel ],
				renderTo : Ext.getBody()
			});

			mapPanel.map.addControl(new OpenLayers.Control.MousePosition({
				element : $('location')
			}));

			
//			infoControls = getInfoControls(mapPanel.layers);
//			registerEventInMapPanel(infoControls);
			
			controls.push(new OpenLayers.Control.WMSGetFeatureInfo({
			    autoActivate: true,
			    infoFormat: "application/vnd.ogc.gml",
			    maxFeatures: 3,
			    eventListeners: {
			        "getfeatureinfo": function(e) {
			             new GeoExt.Popup({
			                title: "Feature Info",
			                width: 200,
			                height: 200,
			                layout: "accordion",
			                map: mapPanel,
			                location: e.xy,
			                items: items
			            }).show();
			        }
			    }
			}));
		});

function getInfoControls(inMapLayers){
	var infoControls = {
			click : new OpenLayers.Control.WMSGetFeatureInfo(
					{
						url : 'http://localhost:8080/geoserver/wms',
						title : 'Identify features by clicking',
						layers : inMapLayers,
						queryVisible : true,
						infoFormat : 'application/vnd.ogc.gml',
						eventListeners : {
							getfeatureinfo : function(event) {
								mapPanel.map
										.addPopup(new OpenLayers.Popup.FramedCloud(
												"chicken",
												mapPanel.map
														.getLonLatFromPixel(event.xy),
												null, GenPopText(event),
												null, true));
							}
						}
					})
		};

	return infoControls;
}

function registerEventInMapPanel(infoControls){
	for(var i in infoControls){
		for ( var i in infoControls) {
			infoControls[i].events.register("getfeatureinfo", this,
					showInfo);
			mapPanel.map.addControl(infoControls[i]);
		}
	}
	infoControls.click.activate();
}

function removeEventsInMapPanel(infoControls){
	for( var i in infoControls){
		mapPanel.map.removeControl(infoControls[i]);
	}
}

function GenPopText(evt) {
	var temstr = "<b><i>" + evt.features[0].gml.featureType + "</i></b><br/>";
	for ( var key in evt.features[0].attributes) {
		temstr += "<b>" + key + "</b>:" + evt.features[0].attributes[key]
				+ "<br/>";
	}
	return temstr
}

function showInfo(evt) {
	if (evt.features && evt.features.length) {
		highlightLayer.destroyFeatures();
		highlightLayer.addFeatures(evt.features);
		highlightLayer.redraw();

		$('nodelist').innerHTML = GenPopText(evt);

	} else {
		$('nodelist').innerHTML = evt.text;
	}
}
